<template>
  <AdaptiveView>
    <div class="screen-container">
      <!-- 客户筛选框 -->
      <div class="customer-select">
        <el-form-item
          label=""
          class="customer-select"
          style="width: 320px"
          label-width="80px"
        >
          <el-select
            v-model="selectedCustomerId"
            @change="customerHadel"
            placeholder="默认展示全部"
            clearable
            popper-class="custom-select1"
          >
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.partnerName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
      <button class="side-btn left-btn" @click="prevActive">◀</button>
      <div class="screen-content" ref="screenRef">
        <div v-show="loading" class="mask flex-c">
          <dv-loading>
            <span class="loading-title">加载中...</span>
          </dv-loading>
        </div>
        <div v-if="!loading" class="h-full">
          <JTMoldTaskRL
            :projectCode="selectedCustomerCode"
            @get-info="loadingHadle"
            v-if="active == '1'"
          />

          <JTMoldRL v-if="active == '2'" :mesProducingMonthBI="andoBIDTOS" />
          <JTMaintenanceRL
            v-if="active == '3'"
            :mesProducingMonthBI="mesProducingMonthBI"
          />
        </div>
      </div>
      <!-- 右侧按钮 -->
      <button class="side-btn right-btn" @click="nextActive">▶</button>
    </div>
  </AdaptiveView>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useRoute } from "vue-router";
import dayjs from "dayjs";

defineOptions({
  name: "DATASCREENJTAMOLDTASKSREEN",
  inheritAttrs: false,
});

function loadingHadle(value) {
  // loading.value = value;
}

const loading = ref(false);
const route = useRoute();
let timer1 = ref(null);

onMounted(() => {
  // if (!route.query.screenCode) {
  //   getBoardConfig();
  // } else {
  //   ElMessage.error("请输入屏幕编号进行看板查询");
  //   loading.value = false;
  // }
  // setTimeout(() => {

  // const dropdownWrap = document.querySelector(
  //   ".custom-select1 .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap"
  // );

  // if (dropdownWrap) {
  //   dropdownWrap.style.backgroundColor = "#091734";
  //   dropdownWrap.style.color = "#fff";
  // }
  getCustomerList();

  //   getProducingMonthBI();
  // }, 1000);
  // setInterval(() => {
  //   getProducingMonthBI();
  //   // console.log(index, boardConfig.value.length);
  // }, 10000);

  timer1.value = setInterval(() => {
    nextActive();
  }, 60 * 1000); // 5分
});

// 序号
const active = ref("1");
let dataList = ["1", "2", "3"];
// 第一个大屏数据 (任务)
const planBIDTOS = ref();
const getProducingPlan = async () => {
  // planBIDTOS.value = {};
  // const { data }: any = await request({
  //   url: `/mes/ProductionBI/getProducingPlanBI`,
  //   method: "post",
  //   data: {
  //     screenCode: route.query.screenCode || "D",
  //   },
  // });
  // planBIDTOS.value = data;
};

// 第二个大屏数据  (生产)
const andoBIDTOS = ref([]);
const getAndoBIDTOS = async () => {
  // loading.value = true;
  await request({
    url: `/eam/board/productionTask`,
    method: "post",
    data: {
      projectCode: selectedCustomerCode.value || "",

      // productionDate: "2025-01-06",
      // productionDate: dayjs(new Date()).format("YYYY-MM-DD"),
    },
  })
    .then((res) => {
      andoBIDTOS.value = res.data || [];
      loading.value = false;
    })
    .finally(() => {
      loading.value = false;
    })
    .catch(() => {
      andoBIDTOS.value = [];
    });
};

// // 第四个大屏数据
// const pieTableData = ref([]);
// const pieData = ref([]);

// const mesProducingMonthBI = ref([]);
// const getProducingMonthBI = async () => {
//   const { data }: any = await request({
//     url: `/mes/biscreendisplayfeeding/getDisplayOne/HJJL`,
//     method: "get",
//   }).catch(() => {
//     mesProducingMonthBI.value = [];
//   });

//   mesProducingMonthBI.value = data || [];
// };

// 第三个大屏数据 （维修）
const mesProducingMonthBI = ref([]);
const getProducingWeekBI = async () => {
  // loading.value = true;
  await request({
    url: `/eam/board/maintenanceTask`,
    method: "post",
    data: {
      projectCode: selectedCustomerCode.value || "",
      // productionDate: "2025-01-06",
      // productionDate: dayjs(new Date()).format("YYYY-MM-DD"),
    },
  })
    .then((res) => {
      mesProducingMonthBI.value = res.data || [];
      loading.value = false;
    })
    .finally(() => {
      loading.value = false;
    })
    .catch(() => {
      mesProducingMonthBI.value = [];
    });
};

// // 获取当前大屏配置
// const defaultBoardConfig = reactive({
//   name: "",
//   id: "",
//   refreshRate: 30,
//   switchingTime: 60,
// });
// const boardConfig: any = ref([]);
// const getBoardConfig = async () => {
//   const { data }: any = await request({
//     url: `/mes/messcreen/getSpectacularsList`,
//     method: "post",
//     data: {
//       screenCode: route.query.screenCode || "D",
//     },
//   }).catch(() => {
//     loading.value = false;
//   });
//   boardConfig.value = data.details || [];
//   handleScreenData(0);
//   loading.value = false;
// };

let timer: any = ref(null);

// // 大屏切换处理方法
// function handleScreenData(index: number) {
//   clearInterval(timer.value);
//   timer.value = null;

//   timer.value = setInterval(() => {
//     index = index + 1;
//     if (index === boardConfig.value.length) {
//       index = 0;
//     }
//     // console.log(index, boardConfig.value.length);
//     handleScreenData(index);
//   }, defaultBoardConfig.switchingTime * 1000);
// }
// 切换到上一个
function prevActive() {
  let idx = dataList.indexOf(active.value);
  idx = idx - 1 < 0 ? dataList.length - 1 : idx - 1;
  active.value = dataList[idx];
  clearInterval(timer.value);
  timer.value = null;

  if (active.value == "2") {
    getAndoBIDTOS();
    timer.value = setInterval(() => {
      getAndoBIDTOS();
      // console.log(index, boardConfig.value.length);
    }, 10000);
  } else if (active.value == "3") {
    getProducingWeekBI();

    timer.value = setInterval(() => {
      getProducingWeekBI();
      // console.log(index, boardConfig.value.length);
    }, 10000);
  }
  clearInterval(timer1.value);
  timer1.value = null;
  timer1.value = setInterval(() => {
    nextActive();
  }, 60 * 1000); // 5分
}

// 切换到下一个
function nextActive() {
  let idx = dataList.indexOf(active.value);
  idx = idx + 1 >= dataList.length ? 0 : idx + 1;
  active.value = dataList[idx];

  clearInterval(timer.value);
  timer.value = null;

  if (active.value == "2") {
    getAndoBIDTOS();
    timer.value = setInterval(() => {
      getAndoBIDTOS();
      // console.log(index, boardConfig.value.length);
    }, 10000);
  } else if (active.value == "3") {
    getProducingWeekBI();

    timer.value = setInterval(() => {
      getProducingWeekBI();
      // console.log(index, boardConfig.value.length);
    }, 10000);
  }
}

// 客户
const selectedCustomerId = ref("");
const selectedCustomerName = ref("");
const selectedCustomerCode = ref("");
// 获取客户
const customerList: any = ref([]);
const getCustomerList = async () => {
  await request({
    url: "mdm/mdmpartner/getList",
    method: "GET",
    // data: { assetKind: "3" },
  }).then((res) => {
    customerList.value = res.data;
  });
};

const customerHadel = (e) => {
  if (e) {
    customerList.value.forEach((item) => {
      if (item.id == e) {
        selectedCustomerName.value = item.partnerName;
        selectedCustomerCode.value = item.partnerCode;
      }
    });
  } else {
    selectedCustomerName.value = "";
    selectedCustomerCode.value = "";
  }
};
watch(
  () => selectedCustomerId.value,
  (newVal) => {
    if (active.value == "2") {
      getAndoBIDTOS();
    } else if (active.value == "3") {
      getProducingWeekBI();
    }
  },
  {
    deep: true,
  }
);
onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
  clearInterval(timer1.value);
  timer1.value = null;
});
</script>

<style lang="scss" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-image: url("@/assets/images/screen/pageBg.png");
  }

  .screen-content {
    width: 1678px;
    height: 946px;
    box-sizing: border-box;
    // padding: 12px;
    background-image: url("@/assets/images/screen/pageBg.png");
    transition: all 0.2s ease-in-out;

    :deep(.el-card) {
      background-color: transparent;
      border: none;
      .el-card__header {
        background: rgba(212, 219, 249, 0.1);
        border-bottom: none;
        color: white;
        .el-card-title {
          color: white;
        }
      }
    }

    .loading-title {
      font-size: 16px;
      color: #fff;
      margin-top: 10px;
    }
  }
}
.side-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  z-index: 10000;
  transition: background 0.2s;
  &:hover {
    background: rgba(0, 0, 0, 0.6);
  }
}
.left-btn {
  left: 5px;
}
.right-btn {
  right: 5px;
}

.customer-select {
  position: absolute;
  top: 58px;
  left: 6%;
  transform: translateX(-50%);
  z-index: 10001;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;

  select {
    margin-left: 8px;
    padding: 4px 12px;
    border-radius: 4px;
    border: none;
    font-size: 16px;
  }
}

.customer-select :deep(.el-input__wrapper) {
  background: #020716 !important;
  color: #e3f1ff !important;
  border: 1px solid #020716 !important;
}
.customer-select :deep(.el-input__inner) {
  background: #020716 !important;
  color: #e3f1ff !important;
}
.customer-select :deep(.el-select-dropdown) {
  background: #020716 !important;
  color: #e3f1ff !important;
}
.customer-select :deep(.el-select-dropdown__item) {
  background: #020716 !important;
  color: #e3f1ff !important;
}
.customer-select :deep(.el-select-dropdown__item.selected) {
  background: #020716 !important;
  color: #e3f1ff !important;
}

.customer-select :deep(.el-select-dropdown__item:hover) {
  background: #232b3a !important;
  color: #fff !important;
}
</style>
